<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue ajax研究(留言板)</title>
	<link rel="stylesheet" href="js/bootstrap.css">
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/vue-resource.js"></script>
	<style>
		*{
			outline:none;
			margin: 0;
			padding: 0;	
		}
		#t1{
			font-size: 20px;
			outline:none;
		}
		.col-md-3{
			/*border:3px solid #8AFFE4;*/
		}
		.container{
			margin-top: 10px;
		}
		.panel-footer{
			overflow:hidden;
		}
		.btn-sm{
			margin-left: 2rem;
		}
		.panel-body{
			padding:1.5rem;
		}
	</style>
	<script>
		$(function(){
			var vm=new Vue({
				el:'.container',
				data:{
					mydata:[],
					t1:'',
				},
				methods:{
					add:function(){
						this.$http({
							url:'weibo.php',
							data:{
								act:'add',
								content:this.t1
							}
						}).then(function(res){
							var json=res.data;
							console.log(json);
						})
						var timer=new Date();
						this.mydata.unshift({
							content:this.t1,
							id:'huchangjiang',
							time:timer.getHours()+'时'+timer.getMinutes()+'分',
							up:0,
							down:0
						});
						this.t1='';
					},
					del:function(index){
						this.mydata.splice(index,1);
					}
				}
			})
		})
	</script>
</head>
<body>
	<div class="container">
		<textarea class="form-control" rows="5" id="t1" v-model="t1"></textarea>
		<div class="form-group text-right">
			<button class="btn btn-info btn-lg" @click="add">留言</button>
		</div>
		<div class="col-md-3 panel-info panel">
			<div class="panel-heading">
			<h3 class="panel-title">个人资料</h3>
			</div>
			<div class="panel-body">
				<div class="text-center">
					<img src="9.gif" alt="" width="100" hight="100" class="text-center">
				</div>

				<div class="form-group text-center">
					<h4>huchangjiang</h4>
				</div>
				
				<h6>访问：60次</h6>
				<h6>积分：126</h6>
				<h6>等级：1级</h6>
				<h6>排名：1265</h6>
			</div>
		</div>
		<div class="col-md-9">
			<div class="panel panel-info" >
				<div class="panel-heading text-center">
					<h4 class="panel-titel">留 言 区</h4>
				</div>
				<div class="panel-body text-center" v-show="mydata.length==0">
					<span>暂无留言</span>
				</div>
			</div>
			<div class="panel panel-info" v-for="(item,index) in mydata">
				<div class="panel-body">
					{{item.content}}
				</div>
				<div class="panel-footer">
					<div class="col-md-9">
						<span style="margin-left:-1rem">发表时间：{{item.time}}</span>
					</div>
					<div class="col-md-3">
						<span>👍&nbsp;{{item.up}}&nbsp;&nbsp;</span>
						<span>👎&nbsp;{{item.up}}&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;
						<button class="btn btn-danger btn-sm" @click="del(index)">删除</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>